<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>05.transitioning-between-elements</title>
        <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.js"></script>
        <link
            href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.3/css/bootstrap.css"
            rel="stylesheet"
        />

        <style>
            /*
        通过样式来控制动画效果，动画的产生主要包含进入出移出的样式控制
        在设置完样式以后设置transition的name值，设置为样式名称前缀即可
        */
            .fade-enter {
                opacity: 0;
            }

            .fade-enter-active {
                transition: opacity 1s;
            }

            .fade-leave {
                opacity: 1;
            }

            .fade-leave-active {
                transition: opacity 1s;
                opacity: 0;
            }
        </style>
    </head>

    <body>
        <div id="app">
            <button class="btn btn-primary" @click="show = !show">
                Show Alert
            </button>
            <!-- TODO:元素之间动画切换 -->
            <!--
                // ! mode参数：
                // ! in-out：先新元素进行动画运行，然后再实现旧元素的动画运行
                // ! out-in：旧元素先进行动画运行，然后再实现新元素的动画运行
             -->
            <transition name="fade" mode="out-in">
                <div class="alert alert-info" v-if="show" key="info">
                    This is some info
                </div>
                <div class="alert alert-warning" v-else="show" key="warning">
                    This is some info
                </div>
            </transition>
        </div>
        <script type="text/javascript">
            new Vue({
                el: '#app',
                data: {
                    show: true,
                },
            });
        </script>
    </body>
</html>
